<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的世界</title>
    <!-- 引入Tailwind CSS，用于快速布局和样式 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 设置Inter字体 */
        body {
            font-family: 'Inter', sans-serif;
            overflow: hidden; /* 防止滚动条出现 */
            margin: 0;
            padding: 0;
            background-color: #000; /* 确保背景是黑色以衬托粒子效果 */
        }
        /* Canvas占据整个视口 */
        canvas {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1; /* 将canvas放在内容后面 */
            background-color: #0d1117; /* 深色背景 */
        }
        /* 主内容区域样式 */
        .content-container {
            position: relative;
            z-index: 1; /* 确保内容在canvas前面 */
            min-height: 100vh; /* 确保内容占据整个高度 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: white;
            padding: 20px;
        }
    </style>
</head>
<body>
    <canvas id="backgroundCanvas"></canvas>

    <div class="content-container bg-opacity-70">
        <h1 class="text-5xl md:text-7xl font-bold mb-4 rounded-lg p-4 bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 text-transparent bg-clip-text">
            欢迎来到我的世界
        </h1>
        <p class="text-xl md:text-2xl mb-8 rounded-lg p-3 bg-white bg-opacity-10 backdrop-blur-sm">
            这个页面展示了一个动态的粒子背景效果。
        </p>
        <button class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full shadow-lg transition-all duration-300 transform hover:scale-105">
            探索更多
        </button>
    </div>

    <script>
        // 获取Canvas元素和绘图上下文
        const canvas = document.getElementById('backgroundCanvas');
        const ctx = canvas.getContext('2d');

        let particles = []; // 存储所有粒子的数组
        const particleCount = 100; // 粒子数量
        const maxDistance = 120; // 粒子之间连接的最大距离

        let mouse = {
            x: null,
            y: null,
            radius: 150 // 鼠标影响范围
        };

        // 窗口大小调整时，调整canvas大小
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            // 重新初始化粒子以适应新尺寸，防止粒子跑到屏幕外
            initParticles();
        }

        // 粒子构造函数
        function Particle(x, y, directionX, directionY, size, color) {
            this.x = x;
            this.y = y;
            this.directionX = directionX; // x轴移动方向和速度
            this.directionY = directionY; // y轴移动方向和速度
            this.size = size;
            this.color = color;
        }

        // 绘制粒子
        Particle.prototype.draw = function() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
            ctx.fillStyle = this.color;
            ctx.fill();
        };

        // 更新粒子位置和行为
        Particle.prototype.update = function() {
            // 检查粒子是否超出边界
            if (this.x + this.size > canvas.width || this.x - this.size < 0) {
                this.directionX = -this.directionX;
            }
            if (this.y + this.size > canvas.height || this.y - this.size < 0) {
                this.directionY = -this.directionY;
            }

            // 鼠标交互：根据鼠标距离调整粒子速度
            let dxMouse = mouse.x - this.x;
            let dyMouse = mouse.y - this.y;
            let distanceMouse = Math.sqrt(dxMouse * dxMouse + dyMouse * dyMouse);

            if (distanceMouse < mouse.radius + this.size) {
                if (mouse.x < this.x && this.x < canvas.width - this.size * 10) {
                    this.x += 1;
                }
                if (mouse.x > this.x && this.x > this.size * 10) {
                    this.x -= 1;
                }
                if (mouse.y < this.y && this.y < canvas.height - this.size * 10) {
                    this.y += 1;
                }
                if (mouse.y > this.y && this.y > this.size * 10) {
                    this.y -= 1;
                }
            }

            this.x += this.directionX;
            this.y += this.directionY;

            this.draw();
        };

        // 初始化粒子
        function initParticles() {
            particles = []; // 清空现有粒子
            for (let i = 0; i < particleCount; i++) {
                let size = (Math.random() * 5) + 1; // 粒子大小1到6
                let x = (Math.random() * ((canvas.width - size * 2) - (size * 2)) + size * 2);
                let y = (Math.random() * ((canvas.height - size * 2) - (size * 2)) + size * 2);
                let directionX = (Math.random() * 0.5) - 0.25; // x轴速度-0.25到0.25
                let directionY = (Math.random() * 0.5) - 0.25; // y轴速度-0.25到0.25
                let color = `hsl(${Math.random() * 360}, 70%, 70%)`; // 随机鲜艳颜色

                particles.push(new Particle(x, y, directionX, directionY, size, color));
            }
        }

        // 连接粒子并绘制线条
        function connect() {
            let opacityValue = 1;
            for (let a = 0; a < particles.length; a++) {
                for (let b = a; b < particles.length; b++) {
                    let dx = particles[a].x - particles[b].x;
                    let dy = particles[a].y - particles[b].y;
                    let distance = Math.sqrt(dx * dx + dy * dy);

                    if (distance < maxDistance) {
                        opacityValue = 1 - (distance / maxDistance);
                        ctx.strokeStyle = `rgba(255, 255, 255, ${opacityValue})`; // 连接线的颜色和透明度
                        ctx.lineWidth = 1;
                        ctx.beginPath();
                        ctx.moveTo(particles[a].x, particles[a].y);
                        ctx.lineTo(particles[b].x, particles[b].y);
                        ctx.stroke();
                    }
                }
            }
        }

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布

            for (let i = 0; i < particles.length; i++) {
                particles[i].update(); // 更新并绘制粒子
            }
            connect(); // 连接粒子
        }

        // 监听鼠标移动事件
        window.addEventListener('mousemove',
            function(event){
                mouse.x = event.x;
                mouse.y = event.y;
            }
        );

        // 监听鼠标离开页面事件
        window.addEventListener('mouseout',
            function(){
                mouse.x = undefined;
                mouse.y = undefined;
            }
        );

        // 页面加载和窗口大小调整时初始化
        window.addEventListener('load', () => {
            resizeCanvas(); // 初始设置canvas尺寸
            initParticles(); // 初始化粒子
            animate(); // 开始动画
        });

        window.addEventListener('resize', resizeCanvas); // 监听窗口大小变化
    </script>
</body>
</html>
